/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* entity */
import Field from '@model/entity/Field'
/* hooks */
/* mixins */
import FormMixin from '@src/component/form/mixin/form'
/* model */
import FormStyle, { FormStyleFont } from '@model/form/FormStyle'
/* scss */
import '@src/component/form/components/FormStyle/FormStyle.scss'
/* util */
import { hexToRgb, rgbToHex } from '@src/util/color'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, ComputedRef, computed, Ref, ref, ToRefs, watch } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { isUndefined } from '@src/util/type'
import i18n from '@src/locales'

export enum FormStyleColorEventEnum {
  Change = 'change'
}

export type FormStyleColorProps = {
  // 值
  value: FormStyle | undefined
}

export interface FormStyleColorSetupState {
  color: ComputedRef<string>
  onColorChangeHandler: (value: string) => void
  resetColor: Function
}

export type FormStyleColorInstance = ComponentInstance & FormStyleColorSetupState
export type FormStyleColorVM = ComponentRenderProxy<FormStyleColorProps> & CommonComponentInstance

const DEFAULT_COLOR: string = '#262626'
const PREDEFINE_COLORS: string[] = [
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
]

export default defineComponent<FormStyleColorProps, FormStyleColorSetupState>({
  name: ComponentNameEnum.FormStyleColor,
  mixins: [FormMixin],
  props: {
    value: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props: FormStyleColorProps, { emit }) {
    const color: ComputedRef<string> = computed(() => props.value?.color || DEFAULT_COLOR)
    
    const onColorChangeHandler = (value: string) => {
      emit(FormStyleColorEventEnum.Change, rgbToHex(value))
    }
    
    const resetColor = () => {
      onColorChangeHandler(DEFAULT_COLOR)
    }
    
    return {
      color,
      onColorChangeHandler,
      resetColor
    }
  },
  render() {
    return (
      <div class="form-style-color">
        <span class="form-style-color-text">
          { this.color }
        </span>
        <span class="form-style-color-reset" onClick={this.resetColor}>
          {i18n.t('common.base.reset')}
        </span>
        <el-color-picker
          predefine={PREDEFINE_COLORS}
          value={this.color}
          onInput={this.onColorChangeHandler}
        >
        </el-color-picker>
      </div>
    )
  }
})
